রিঅ্যাক্ট useFormState ভ্যালিডেশন: উন্নত ফর্ম স্টেট ম্যানেজমেন্টের একটি বিস্তারিত নির্দেশিকা

            
// Assumes a hypothetical useFormState implementation or a library like @mantine/form
import React from 'react';
import { useFormState } from './useFormState'; // Replace with actual import

function ContactForm() {
  const { values, errors, touched, handleChange, handleSubmit } = useFormState({
    initialValues: {
      name: '',
      email: '',
      message: '',
    },
    validationRules: {
      name: (value) => (value ? null : 'Name is required'),
      email: (value) => (value && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) ? null : 'Invalid email address'),
      message: (value) => (value ? null : 'Message is required'),
    },
    onSubmit: (values) => {
      console.log('Form submitted:', values);
      // Add your form submission logic here
    },
  });

  return (
    

      

        Name:
        
        {errors.name && touched.name && {errors.name}}
      
      

        Email:
        
        {errors.email && touched.email && {errors.email}}
      
      

        Message:
                {errors.message && touched.message && <span className="error">{errors.message}</span>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default ContactForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ci8vIEFzc3VtZXMgYSBoeXBvdGhldGljYWwgdXNlRm9ybVN0YXRlIGltcGxlbWVudGF0aW9uIG9yIGEgbGlicmFyeSBsaWtlIEBtYW50aW5lL2Zvcm0KaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JzsKaW1wb3J0IHsgdXNlRm9ybVN0YXRlIH0gZnJvbSAnLi91c2VGb3JtU3RhdGUnOyAvLyBSZXBsYWNlIHdpdGggYWN0dWFsIGltcG9ydAoKZnVuY3Rpb24gQ29udGFjdEZvcm0oKSB7CiAgY29uc3QgeyB2YWx1ZXMsIGVycm9ycywgdG91Y2hlZCwgaGFuZGxlQ2hhbmdlLCBoYW5kbGVTdWJtaXQgfSA9IHVzZUZvcm1TdGF0ZSh7CiAgICBpbml0aWFsVmFsdWVzOiB7CiAgICAgIG5hbWU6ICcnLAogICAgICBlbWFpbDogJycsCiAgICAgIG1lc3NhZ2U6ICcnLAogICAgfSwKICAgIHZhbGlkYXRpb25SdWxlczogewogICAgICBuYW1lOiAodmFsdWUpID0+ICh2YWx1ZSA/IG51bGwgOiAnTmFtZSBpcyByZXF1aXJlZCcpLAogICAgICBlbWFpbDogKHZhbHVlKSA9PiAodmFsdWUgJiYgL15bXlxzQF0rQFteXHNAXStcLlteXHNAXSskLy50ZXN0KHZhbHVlKSA/IG51bGwgOiAnSW52YWxpZCBlbWFpbCBhZGRyZXNzJyksCiAgICAgIG1lc3NhZ2U6ICh2YWx1ZSkgPT4gKHZhbHVlID8gbnVsbCA6ICdNZXNzYWdlIGlzIHJlcXVpcmVkJyksCiAgICB9LAogICAgb25TdWJtaXQ6ICh2YWx1ZXMpID0+IHsKICAgICAgY29uc29sZS5sb2coJ0Zvcm0gc3VibWl0dGVkOicsIHZhbHVlcyk7CiAgICAgIC8vIEFkZCB5b3VyIGZvcm0gc3VibWlzc2lvbiBsb2dpYyBoZXJlCiAgICB9LAogIH0pOwoKICByZXR1cm4gKAogICAgPGZvcm0gb25TdWJtaXQ9e2hhbmRsZVN1Ym1pdH0+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9Im5hbWUiPk5hbWU6PC9sYWJlbD4KICAgICAgICA8aW5wdXQKICAgICAgICAgIHR5cGU9InRleHQiCiAgICAgICAgICBpZD0ibmFtZSIKICAgICAgICAgIG5hbWU9Im5hbWUiCiAgICAgICAgICB2YWx1ZT17dmFsdWVzLm5hbWV9CiAgICAgICAgICBvbkNoYW5nZT17aGFuZGxlQ2hhbmdlfQogICAgICAgIC8+CiAgICAgICAge2Vycm9ycy5uYW1lICYmIHRvdWNoZWQubmFtZSAmJiA8c3BhbiBjbGFzc05hbWU9ImVycm9yIj57ZXJyb3JzLm5hbWV9PC9zcGFuPn0KICAgICAgPC9kaXY+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9ImVtYWlsIj5FbWFpbDo8L2xhYmVsPgogICAgICAgIDxpbnB1dAogICAgICAgICAgdHlwZT0iZW1haWwiCiAgICAgICAgICBpZD0iZW1haWwiCiAgICAgICAgICBuYW1lPSJlbWFpbCIKICAgICAgICAgIHZhbHVlPXt2YWx1ZXMuZW1haWx9CiAgICAgICAgICBvbkNoYW5nZT17aGFuZGxlQ2hhbmdlfQogICAgICAgIC8+CiAgICAgICAge2Vycm9ycy5lbWFpbCAmJiB0b3VjaGVkLmVtYWlsICYmIDxzcGFuIGNsYXNzTmFtZT0iZXJyb3IiPntlcnJvcnMuZW1haWx9PC9zcGFuPn0KICAgICAgPC9kaXY+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9Im1lc3NhZ2UiPk1lc3NhZ2U6PC9sYWJlbD4KICAgICAgICA8dGV4dGFyZWEKICAgICAgICAgIGlkPSJtZXNzYWdlIgogICAgICAgICAgbmFtZT0ibWVzc2FnZSIKICAgICAgICAgIHZhbHVlPXt2YWx1ZXMubWVzc2FnZX0KICAgICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9CiAgICAgICAgLz4KICAgICAgICB7ZXJyb3JzLm1lc3NhZ2UgJiYgdG91Y2hlZC5tZXNzYWdlICYmIDxzcGFuIGNsYXNzTmFtZT0iZXJyb3IiPntlcnJvcnMubWVzc2FnZX08L3NwYW4+fQogICAgICA8L2Rpdj4KICAgICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiPlN1Ym1pdDwvYnV0dG9uPgogICAgPC9mb3JtPgogICk7Cn0KCmV4cG9ydCBkZWZhdWx0IENvbnRhY3RGb3JtOwo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>ব্যাখ্যা:</b></p>
<ul>
  <li>আমরা ফর্ম ফিল্ডের জন্য প্রাথমিক মান এবং ভ্যালিডেশন নিয়ম দিয়ে <code>useFormState</code> শুরু করি।</li>
  <li><code>handleChange</code> ফাংশনটি কোনো ইনপুট ফিল্ড পরিবর্তন হলে ফর্মের স্টেট আপডেট করে।</li>
  <li><code>handleSubmit</code> ফাংশনটি ফর্ম জমা দেওয়ার সময় কল করা হয়। এটি ডেটা জমা দেওয়ার আগে ভ্যালিডেশন ত্রুটি পরীক্ষা করে।</li>
  <li>ভ্যালিডেশন ত্রুটি থাকলে এবং ফিল্ডটি টাচ (blurred) করা হলে সংশ্লিষ্ট ইনপুট ফিল্ডের পাশে ত্রুটির বার্তা দেখানো হয়।</li>
</ul>

<h3>উদাহরণ ২: পাসওয়ার্ড কনফার্মেশন সহ রেজিস্ট্রেশন ফর্ম</h3>

<p>এই উদাহরণে ইউজারনেম, ইমেল, পাসওয়ার্ড এবং পাসওয়ার্ড কনফার্মেশন ফিল্ড সহ একটি রেজিস্ট্রেশন ফর্ম দেখানো হয়েছে। আমরা নিশ্চিত করার জন্য ভ্যালিডেশন প্রয়োগ করব যে সমস্ত ফিল্ড আবশ্যক, ইমেল ঠিকানা বৈধ, পাসওয়ার্ড নির্দিষ্ট মানদণ্ড পূরণ করে (যেমন, ন্যূনতম দৈর্ঘ্য), এবং পাসওয়ার্ড কনফার্মেশন পাসওয়ার্ডের সাথে মেলে।</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>
// Assumes a hypothetical useFormState implementation or a library like @mantine/form
import React from 'react';
import { useFormState } from './useFormState'; // Replace with actual import

function RegistrationForm() {
  const { values, errors, touched, handleChange, handleSubmit } = useFormState({
    initialValues: {
      username: '',
      email: '',
      password: '',
      passwordConfirmation: '',
    },
    validationRules: {
      username: (value) => (value ? null : 'Username is required'),
      email: (value) => (value && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) ? null : 'Invalid email address'),
      password: (value) => (value && value.length >= 8 ? null : 'Password must be at least 8 characters long'),
      passwordConfirmation: (value) =>
        value === values.password ? null : 'Password confirmation does not match password',
    },
    onSubmit: (values) => {
      console.log('Form submitted:', values);
      // Add your form submission logic here
    },
  });

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="username">Username:</label>
        <input
          type="text"
          id="username"
          name="username"
          value={values.username}
          onChange={handleChange}
        />
        {errors.username && touched.username && <span className="error">{errors.username}</span>}
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          name="email"
          value={values.email}
          onChange={handleChange}
        />
        {errors.email && touched.email && <span className="error">{errors.email}</span>}
      </div>
      <div>
        <label htmlFor="password">Password:</label>
        <input
          type="password"
          id="password"
          name="password"
          value={values.password}
          onChange={handleChange}
        />
        {errors.password && touched.password && <span className="error">{errors.password}</span>}
      </div>
      <div>
        <label htmlFor="passwordConfirmation">Password Confirmation:</label>
        <input
          type="password"
          id="passwordConfirmation"
          name="passwordConfirmation"
          value={values.passwordConfirmation}
          onChange={handleChange}
        />
        {errors.passwordConfirmation && touched.passwordConfirmation && (
          <span className="error">{errors.passwordConfirmation}</span>
        )}
      </div>
      <button type="submit">Register</button>
    </form>
  );
}

export default RegistrationForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ci8vIEFzc3VtZXMgYSBoeXBvdGhldGljYWwgdXNlRm9ybVN0YXRlIGltcGxlbWVudGF0aW9uIG9yIGEgbGlicmFyeSBsaWtlIEBtYW50aW5lL2Zvcm0KaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JzsKaW1wb3J0IHsgdXNlRm9ybVN0YXRlIH0gZnJvbSAnLi91c2VGb3JtU3RhdGUnOyAvLyBSZXBsYWNlIHdpdGggYWN0dWFsIGltcG9ydAoKZnVuY3Rpb24gUmVnaXN0cmF0aW9uRm9ybSgpIHsKICBjb25zdCB7IHZhbHVlcywgZXJyb3JzLCB0b3VjaGVkLCBoYW5kbGVDaGFuZ2UsIGhhbmRsZVN1Ym1pdCB9ID0gdXNlRm9ybVN0YXRlKHsKICAgIGluaXRpYWxWYWx1ZXM6IHsKICAgICAgdXNlcm5hbWU6ICcnLAogICAgICBlbWFpbDogJycsCiAgICAgIHBhc3N3b3JkOiAnJywKICAgICAgcGFzc3dvcmRDb25maXJtYXRpb246ICcnLAogICAgfSwKICAgIHZhbGlkYXRpb25SdWxlczogewogICAgICB1c2VybmFtZTogKHZhbHVlKSA9PiAodmFsdWUgPyBudWxsIDogJ1VzZXJuYW1lIGlzIHJlcXVpcmVkJyksCiAgICAgIGVtYWlsOiAodmFsdWUpID0+ICh2YWx1ZSAmJiAvXlteXHNAXStAW15cc0BdK1wuW15cc0BdKyQvLnRlc3QodmFsdWUpID8gbnVsbCA6ICdJbnZhbGlkIGVtYWlsIGFkZHJlc3MnKSwKICAgICAgcGFzc3dvcmQ6ICh2YWx1ZSkgPT4gKHZhbHVlICYmIHZhbHVlLmxlbmd0aCA+PSA4ID8gbnVsbCA6ICdQYXNzd29yZCBtdXN0IGJlIGF0IGxlYXN0IDggY2hhcmFjdGVycyBsb25nJyksCiAgICAgIHBhc3N3b3JkQ29uZmlybWF0aW9uOiAodmFsdWUpID0+CiAgICAgICAgdmFsdWUgPT09IHZhbHVlcy5wYXNzd29yZCA/IG51bGwgOiAnUGFzc3dvcmQgY29uZmlybWF0aW9uIGRvZXMgbm90IG1hdGNoIHBhc3N3b3JkJywKICAgIH0sCiAgICBvblN1Ym1pdDogKHZhbHVlcykgPT4gewogICAgICBjb25zb2xlLmxvZygnRm9ybSBzdWJtaXR0ZWQ6JywgdmFsdWVzKTsKICAgICAgLy8gQWRkIHlvdXIgZm9ybSBzdWJtaXNzaW9uIGxvZ2ljIGhlcmUKICAgIH0sCiAgfSk7CgogIHJldHVybiAoCiAgICA8Zm9ybSBvblN1Ym1pdD17aGFuZGxlU3VibWl0fT4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWwgaHRtbEZvcj0idXNlcm5hbWUiPlVzZXJuYW1lOjwvbGFiZWw+CiAgICAgICAgPGlucHV0CiAgICAgICAgICB0eXBlPSJ0ZXh0IgogICAgICAgICAgaWQ9InVzZXJuYW1lIgogICAgICAgICAgbmFtZT0idXNlcm5hbWUiCiAgICAgICAgICB2YWx1ZT17dmFsdWVzLnVzZXJuYW1lfQogICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZUNoYW5nZX0KICAgICAgICAvPgogICAgICAgIHtlcnJvcnMudXNlcm5hbWUgJiYgdG91Y2hlZC51c2VybmFtZSAmJiA8c3BhbiBjbGFzc05hbWU9ImVycm9yIj57ZXJyb3JzLnVzZXJuYW1lfTwvc3Bhbj59CiAgICAgIDwvZGl2PgogICAgICA8ZGl2PgogICAgICAgIDxsYWJlbCBodG1sRm9yPSJlbWFpbCI+RW1haWw6PC9sYWJlbD4KICAgICAgICA8aW5wdXQKICAgICAgICAgIHR5cGU9ImVtYWlsIgogICAgICAgICAgaWQ9ImVtYWlsIgogICAgICAgICAgbmFtZT0iZW1haWwiCiAgICAgICAgICB2YWx1ZT17dmFsdWVzLmVtYWlsfQogICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZUNoYW5nZX0KICAgICAgICAvPgogICAgICAgIHtlcnJvcnMuZW1haWwgJiYgdG91Y2hlZC5lbWFpbCAmJiA8c3BhbiBjbGFzc05hbWU9ImVycm9yIj57ZXJyb3JzLmVtYWlsfTwvc3Bhbj59CiAgICAgIDwvZGl2PgogICAgICA8ZGl2PgogICAgICAgIDxsYWJlbCBodG1sRm9yPSJwYXNzd29yZCI+UGFzc3dvcmQ6PC9sYWJlbD4KICAgICAgICA8aW5wdXQKICAgICAgICAgIHR5cGU9InBhc3N3b3JkIgogICAgICAgICAgaWQ9InBhc3N3b3JkIgogICAgICAgICAgbmFtZT0icGFzc3dvcmQiCiAgICAgICAgICB2YWx1ZT17dmFsdWVzLnBhc3N3b3JkfQogICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZUNoYW5nZX0KICAgICAgICAvPgogICAgICAgIHtlcnJvcnMucGFzc3dvcmQgJiYgdG91Y2hlZC5wYXNzd29yZCAmJiA8c3BhbiBjbGFzc05hbWU9ImVycm9yIj57ZXJyb3JzLnBhc3N3b3JkfTwvc3Bhbj59CiAgICAgIDwvZGl2PgogICAgICA8ZGl2PgogICAgICAgIDxsYWJlbCBodG1sRm9yPSJwYXNzd29yZENvbmZpcm1hdGlvbiI+UGFzc3dvcmQgQ29uZmlybWF0aW9uOjwvbGFiZWw+CiAgICAgICAgPGlucHV0CiAgICAgICAgICB0eXBlPSJwYXNzd29yZCIKICAgICAgICAgIGlkPSJwYXNzd29yZENvbmZpcm1hdGlvbiIKICAgICAgICAgIG5hbWU9InBhc3N3b3JkQ29uZmlybWF0aW9uIgogICAgICAgICAgdmFsdWU9e3ZhbHVlcy5wYXNzd29yZENvbmZpcm1hdGlvbn0KICAgICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9CiAgICAgICAgLz4KICAgICAgICB7ZXJyb3JzLnBhc3N3b3JkQ29uZmlybWF0aW9uICYmIHRvdWNoZWQucGFzc3dvcmRDb25maXJtYXRpb24gJiYgKAogICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPSJlcnJvciI+e2Vycm9ycy5wYXNzd29yZENvbmZpcm1hdGlvbn08L3NwYW4+CiAgICAgICAgKX0KICAgICAgPC9kaXY+CiAgICAgIDxidXR0b24gdHlwZT0ic3VibWl0Ij5SZWdpc3RlcjwvYnV0dG9uPgogICAgPC9mb3JtPgogICk7Cn0KCmV4cG9ydCBkZWZhdWx0IFJlZ2lzdHJhdGlvbkZvcm07Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>ব্যাখ্যা:</b></p>
<ul>
  <li>আমরা একটি <code>passwordConfirmation</code> ফিল্ড এবং একটি ভ্যালিডেশন নিয়ম যোগ করেছি যাতে এটি <code>password</code> ফিল্ডের সাথে মেলে।</li>
  <li><code>passwordConfirmation</code>-এর ভ্যালিডেশন নিয়মটি দুটি পাসওয়ার্ড ফিল্ড তুলনা করার জন্য <code>values</code> অবজেক্ট অ্যাক্সেস করে।</li>
</ul>

<h3>উদাহরণ ৩: অ্যারে ফিল্ড সহ ডাইনামিক ফর্ম</h3>

<p>এই উদাহরণটি একটি ডাইনামিক ফর্ম দেখায় যেখানে ফিল্ডের সংখ্যা পরিবর্তনশীল হতে পারে। এটি প্রোফাইলে একাধিক স্কিল বা অভিজ্ঞতা যোগ করার মতো পরিস্থিতির জন্য দরকারী। আমরা ডাইনামিক ফিল্ডের মানগুলো সংরক্ষণ করতে একটি অ্যারে ব্যবহার করব এবং ফিল্ড যোগ এবং অপসারণ করার জন্য ফাংশন সরবরাহ করব।</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>
// Assumes a hypothetical useFormState implementation or a library like @mantine/form
import React, { useState } from 'react';
import { useFormState } from './useFormState'; // Replace with actual import

function SkillsForm() {
  const [skills, setSkills] = useState(['']); // Initial skill field

  const { values, errors, touched, handleChange, handleSubmit } = useFormState({
    initialValues: {
      skills: skills, // Initialize with the current state of skills
    },
    validationRules: {
      skills: (value) => {
        // Example validation: Ensure each skill is not empty
        for (let i = 0; i < value.length; i++) {
          if (!value[i]) {
            return 'All skills are required'; // Return a single error message
          }
        }
        return null; // No error if all skills are valid
      },
    },
    onSubmit: (values) => {
      console.log('Form submitted:', values);
      // Add your form submission logic here
    },
  });

  const handleSkillChange = (index, event) => {
    const newSkills = [...skills];
    newSkills[index] = event.target.value;
    setSkills(newSkills);

    // Update the form state manually since we're managing the array outside of useFormState
    handleChange({ target: { name: 'skills', value: newSkills } });
  };

  const addSkill = () => {
    setSkills([...skills, '']);
    // Manually trigger re-validation for the 'skills' field
    handleChange({ target: { name: 'skills', value: [...skills, ''] } });
  };

  const removeSkill = (index) => {
    const newSkills = [...skills];
    newSkills.splice(index, 1);
    setSkills(newSkills);

    // Manually trigger re-validation for the 'skills' field
    handleChange({ target: { name: 'skills', value: newSkills } });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Skills:</label>
        {skills.map((skill, index) => (
          <div key={index}>
            <input
              type="text"
              value={skill}
              onChange={(event) => handleSkillChange(index, event)}
            />
            <button type="button" onClick={() => removeSkill(index)}>Remove</button>
          </div>
        ))}
        <button type="button" onClick={addSkill}>Add Skill</button>
        {errors.skills && touched.skills && <span className="error">{errors.skills}</span>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default SkillsForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ci8vIEFzc3VtZXMgYSBoeXBvdGhldGljYWwgdXNlRm9ybVN0YXRlIGltcGxlbWVudGF0aW9uIG9yIGEgbGlicmFyeSBsaWtlIEBtYW50aW5lL2Zvcm0KaW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnOwppbXBvcnQgeyB1c2VGb3JtU3RhdGUgfSBmcm9tICcuL3VzZUZvcm1TdGF0ZSc7IC8vIFJlcGxhY2Ugd2l0aCBhY3R1YWwgaW1wb3J0CgpmdW5jdGlvbiBTa2lsbHNGb3JtKCkgewogIGNvbnN0IFtza2lsbHMsIHNldFNraWxsc10gPSB1c2VTdGF0ZShbJyddKTsgLy8gSW5pdGlhbCBza2lsbCBmaWVsZAoKICBjb25zdCB7IHZhbHVlcywgZXJyb3JzLCB0b3VjaGVkLCBoYW5kbGVDaGFuZ2UsIGhhbmRsZVN1Ym1pdCB9ID0gdXNlRm9ybVN0YXRlKHsKICAgIGluaXRpYWxWYWx1ZXM6IHsKICAgICAgc2tpbGxzOiBza2lsbHMsIC8vIEluaXRpYWxpemUgd2l0aCB0aGUgY3VycmVudCBzdGF0ZSBvZiBza2lsbHMKICAgIH0sCiAgICB2YWxpZGF0aW9uUnVsZXM6IHsKICAgICAgc2tpbGxzOiAodmFsdWUpID0+IHsKICAgICAgICAvLyBFeGFtcGxlIHZhbGlkYXRpb246IEVuc3VyZSBlYWNoIHNraWxsIGlzIG5vdCBlbXB0eQogICAgICAgIGZvciAobGV0IGkgPSAwOyBpIDwgdmFsdWUubGVuZ3RoOyBpKyspIHsKICAgICAgICAgIGlmICghdmFsdWVbaV0pIHsKICAgICAgICAgICAgcmV0dXJuICdBbGwgc2tpbGxzIGFyZSByZXF1aXJlZCc7IC8vIFJldHVybiBhIHNpbmdsZSBlcnJvciBtZXNzYWdlCiAgICAgICAgICB9CiAgICAgICAgfQogICAgICAgIHJldHVybiBudWxsOyAvLyBObyBlcnJvciBpZiBhbGwgc2tpbGxzIGFyZSB2YWxpZAogICAgICB9LAogICAgfSwKICAgIG9uU3VibWl0OiAodmFsdWVzKSA9PiB7CiAgICAgIGNvbnNvbGUubG9nKCdGb3JtIHN1Ym1pdHRlZDonLCB2YWx1ZXMpOwogICAgICAvLyBBZGQgeW91ciBmb3JtIHN1Ym1pc3Npb24gbG9naWMgaGVyZQogICAgfSwKICB9KTsKCiAgY29uc3QgaGFuZGxlU2tpbGxDaGFuZ2UgPSAoaW5kZXgsIGV2ZW50KSA9PiB7CiAgICBjb25zdCBuZXdTa2lsbHMgPSBbLi4uc2tpbGxzXTsKICAgIG5ld1NraWxsc1tpbmRleF0gPSBldmVudC50YXJnZXQudmFsdWU7CiAgICBzZXRTa2lsbHMobmV3U2tpbGxzKTsKCiAgICAvLyBVcGRhdGUgdGhlIGZvcm0gc3RhdGUgbWFudWFsbHkgc2luY2Ugd2UncmUgbWFuYWdpbmcgdGhlIGFycmF5IG91dHNpZGUgb2YgdXNlRm9ybVN0YXRlCiAgICBoYW5kbGVDaGFuZ2UoeyB0YXJnZXQ6IHsgbmFtZTogJ3NraWxscycsIHZhbHVlOiBuZXdTa2lsbHMgfSB9KTsKICB9OwoKICBjb25zdCBhZGRTa2lsbCA9ICgpID0+IHsKICAgIHNldFNraWxscyhbLi4uc2tpbGxzLCAnJ10pOwogICAgLy8gTWFudWFsbHkgdHJpZ2dlciByZS12YWxpZGF0aW9uIGZvciB0aGUgJ3NraWxscycgZmllbGQKICAgIGhhbmRsZUNoYW5nZSh7IHRhcmdldDogeyBuYW1lOiAnc2tpbGxzJywgdmFsdWU6IFsuLi5za2lsbHMsICcnXSB9IH0pOwogIH07CgogIGNvbnN0IHJlbW92ZVNraWxsID0gKGluZGV4KSA9PiB7CiAgICBjb25zdCBuZXdTa2lsbHMgPSBbLi4uc2tpbGxzXTsKICAgIG5ld1NraWxscy5zcGxpY2UoaW5kZXgsIDEpOwogICAgc2V0U2tpbGxzKG5ld1NraWxscyk7CgogICAgLy8gTWFudWFsbHkgdHJpZ2dlciByZS12YWxpZGF0aW9uIGZvciB0aGUgJ3NraWxscycgZmllbGQKICAgIGhhbmRsZUNoYW5nZSh7IHRhcmdldDogeyBuYW1lOiAnc2tpbGxzJywgdmFsdWU6IG5ld1NraWxscyB9IH0pOwogIH07CgogIHJldHVybiAoCiAgICA8Zm9ybSBvblN1Ym1pdD17aGFuZGxlU3VibWl0fT4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWw+U2tpbGxzOjwvbGFiZWw+CiAgICAgICAge3NraWxscy5tYXAoKHNraWxsLCBpbmRleCkgPT4gKAogICAgICAgICAgPGRpdiBrZXk9e2luZGV4fT4KICAgICAgICAgICAgPGlucHV0CiAgICAgICAgICAgICAgdHlwZT0idGV4dCIKICAgICAgICAgICAgICB2YWx1ZT17c2tpbGx9CiAgICAgICAgICAgICAgb25DaGFuZ2U9eyhldmVudCkgPT4gaGFuZGxlU2tpbGxDaGFuZ2UoaW5kZXgsIGV2ZW50KX0KICAgICAgICAgICAgLz4KICAgICAgICAgICAgPGJ1dHRvbiB0eXBlPSJidXR0b24iIG9uQ2xpY2s9eygpID0+IHJlbW92ZVNraWxsKGluZGV4KX0+UmVtb3ZlPC9idXR0b24+CiAgICAgICAgICA8L2Rpdj4KICAgICAgICApKX0KICAgICAgICA8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgb25DbGljaz17YWRkU2tpbGx9PkFkZCBTa2lsbDwvYnV0dG9uPgogICAgICAgIHtlcnJvcnMuc2tpbGxzICYmIHRvdWNoZWQuc2tpbGxzICYmIDxzcGFuIGNsYXNzTmFtZT0iZXJyb3IiPntlcnJvcnMuc2tpbGxzfTwvc3Bhbj59CiAgICAgIDwvZGl2PgogICAgICA8YnV0dG9uIHR5cGU9InN1Ym1pdCI+U3VibWl0PC9idXR0b24+CiAgICA8L2Zvcm0+CiAgKTsKfQoKZXhwb3J0IGRlZmF1bHQgU2tpbGxzRm9ybTsK"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>ব্যাখ্যা:</b></p>
<ul>
  <li>এই উদাহরণে ডাইনামিক অ্যারের জন্য কিছুটা বেশি ম্যানুয়াল স্টেট ম্যানেজমেন্ট প্রয়োজন।</li>
  <li>আমরা স্কিলের অ্যারে পরিচালনা করতে <code>useState</code> হুক ব্যবহার করি।</li>
  <li><code>handleSkillChange</code>, <code>addSkill</code>, এবং <code>removeSkill</code> ফাংশনগুলো অ্যারে আপডেট করে এবং ফর্ম স্টেট সিঙ্কে রাখতে <code>useFormState</code>-এর <code>handleChange</code> ফাংশনকে ম্যানুয়ালি ট্রিগার করে। এটি কারণ লাইব্রেরি প্রায়শই *অবজেক্টের* প্রপার্টি হ্যান্ডেল করে, কিন্তু অ্যার‍্যে মিউটেশন নয়।</li>
  <li>স্কিলের জন্য ভ্যালিডেশন নিয়মটি পরীক্ষা করে যে সমস্ত স্কিল খালি নয়।</li>
</ul>

<h2>উন্নত ভ্যালিডেশন কৌশল</h2>

<p>সাধারণ আবশ্যক ফিল্ড ভ্যালিডেশনের বাইরেও, আপনি ডেটার অখণ্ডতা নিশ্চিত করতে এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে আরও উন্নত ভ্যালিডেশন কৌশল প্রয়োগ করতে পারেন। এখানে কিছু উদাহরণ দেওয়া হলো:</p>

<ul>
  <li><b>রেগুলার এক্সপ্রেশন:</b> ইমেল ঠিকানা, ফোন নম্বর এবং অন্যান্য ডেটা ফরম্যাট যাচাই করতে রেগুলার এক্সপ্রেশন ব্যবহার করুন।</li>
  <li><b>কাস্টম ভ্যালিডেশন ফাংশন:</b> জটিল ভ্যালিডেশন লজিক প্রয়োগ করতে কাস্টম ভ্যালিডেশন ফাংশন তৈরি করুন, যেমন ইউনিক ইউজারনেম পরীক্ষা করা বা পাসওয়ার্ডের শক্তি যাচাই করা।</li>
  <li><b>অ্যাসিঙ্ক্রোনাস ভ্যালিডেশন:</b> ফর্ম জমা দেওয়ার আগে অ্যাসিঙ্ক্রোনাস ভ্যালিডেশন সম্পাদন করুন, যেমন সার্ভারে কোনো ইউজারনেম উপলব্ধ আছে কিনা তা পরীক্ষা করা। এটি সাধারণত <code>react-hook-form</code> এর মতো লাইব্রেরি দ্বারা সমর্থিত।</li>
  <li><b>শর্তাধীন ভ্যালিডেশন:</b> ফর্মের অন্যান্য ফিল্ডের মানের উপর ভিত্তি করে ভ্যালিডেশন নিয়ম প্রয়োগ করুন। উদাহরণস্বরূপ, ব্যবহারকারী যদি একটি নির্দিষ্ট দেশ নির্বাচন করে তবেই আপনি একটি ফোন নম্বর চাইতে পারেন।</li>
  <li><b>থার্ড-পার্টি ভ্যালিডেশন লাইব্রেরি:</b> Yup বা Zod এর মতো থার্ড-পার্টি ভ্যালিডেশন লাইব্রেরির সাথে ইন্টিগ্রেট করুন যাতে ভ্যালিডেশন স্কিমা সংজ্ঞায়িত করা যায় এবং ভ্যালিডেশন লজিক সহজ করা যায়। এই লাইব্রেরিগুলো প্রায়শই ডেটা ট্রান্সফরমেশন এবং কোয়ার্শনের মতো উন্নত বৈশিষ্ট্য সরবরাহ করে।</li>
</ul>

<h2>অ্যাক্সেসিবিলিটি বিবেচ্য বিষয়</h2>

<p>ফর্ম ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ দিক হলো অ্যাক্সেসিবিলিটি। নিশ্চিত করুন যে আপনার ফর্মগুলো প্রতিবন্ধী ব্যবহারকারীদের জন্য অ্যাক্সেসিবল হয়, নিম্নলিখিত নির্দেশিকাগুলো অনুসরণ করে:</p>

<ul>
  <li><b>স্পষ্ট এবং সংক্ষিপ্ত লেবেল প্রদান করুন:</b> সমস্ত ইনপুট ফিল্ডের জন্য তাদের উদ্দেশ্য ব্যাখ্যা করতে বর্ণনামূলক লেবেল ব্যবহার করুন।</li>
  <li><b>সিমেন্টিক HTML ব্যবহার করুন:</b> আপনার ফর্মগুলো গঠন করতে <code><label></code>, <code><input></code>, এবং <code><textarea></code> এর মতো সিমেন্টিক HTML এলিমেন্ট ব্যবহার করুন।</li>
  <li><b>ত্রুটির বার্তা প্রদান করুন:</b> অবৈধ ইনপুট সম্পর্কে ব্যবহারকারীদের জানাতে স্পষ্ট এবং সংক্ষিপ্ত ত্রুটির বার্তা প্রদর্শন করুন।</li>
  <li><b>ইনপুটের সাথে লেবেল যুক্ত করুন:</b> <code><label></code> এলিমেন্টের <code>for</code> অ্যাট্রিবিউট ব্যবহার করে সেগুলোকে সংশ্লিষ্ট ইনপুট ফিল্ডের সাথে যুক্ত করুন।</li>
  <li><b>ARIA অ্যাট্রিবিউট ব্যবহার করুন:</b> সহায়ক প্রযুক্তিগুলোতে অতিরিক্ত তথ্য সরবরাহ করতে <code>aria-describedby</code> এবং <code>aria-invalid</code> এর মতো ARIA অ্যাট্রিবিউট ব্যবহার করুন।</li>
  <li><b>কিবোর্ড অ্যাক্সেসিবিলিটি নিশ্চিত করুন:</b> নিশ্চিত করুন যে সমস্ত ফর্ম এলিমেন্ট কিবোর্ড ব্যবহার করে অ্যাক্সেসযোগ্য।</li>
  <li><b>সহায়ক প্রযুক্তি দিয়ে পরীক্ষা করুন:</b> আপনার ফর্মগুলো স্ক্রিন রিডারের মতো সহায়ক প্রযুক্তি দিয়ে পরীক্ষা করুন যাতে নিশ্চিত করা যায় যে সেগুলো প্রতিবন্ধী ব্যবহারকারীদের জন্য অ্যাক্সেসযোগ্য।</li>
</ul>

<h2>useFormState-এর জন্য সেরা অনুশীলন</h2>

<p>এখানে <code>useFormState</code> ব্যবহার করার সময় অনুসরণ করার জন্য কিছু সেরা অনুশীলন দেওয়া হলো:</p>

<ul>
  <li><b>ভ্যালিডেশন নিয়ম সংক্ষিপ্ত রাখুন:</b> ভ্যালিডেশন নিয়মগুলো একটি স্পষ্ট এবং সংক্ষিপ্ত পদ্ধতিতে সংজ্ঞায়িত করুন।</li>
  <li><b>ব্যবহারকারী-বান্ধব ত্রুটির বার্তা প্রদান করুন:</b> এমন ত্রুটির বার্তা প্রদর্শন করুন যা বোঝা সহজ এবং ব্যবহারকারীদের সহায়ক নির্দেশিকা প্রদান করে।</li>
  <li><b>আপনার ফর্মগুলো পুঙ্খানুপুঙ্খভাবে পরীক্ষা করুন:</b> আপনার ফর্মগুলো বিভিন্ন ইনপুট মান এবং পরিস্থিতি দিয়ে পরীক্ষা করুন যাতে নিশ্চিত করা যায় যে সেগুলো সঠিকভাবে কাজ করে এবং ত্রুটিগুলো সুন্দরভাবে হ্যান্ডেল করে।</li>
  <li><b>পারফরম্যান্সের প্রভাব বিবেচনা করুন:</b> জটিল ভ্যালিডেশন নিয়ম এবং অ্যাসিঙ্ক্রোনাস ভ্যালিডেশনের পারফরম্যান্সের প্রভাব সম্পর্কে সচেতন থাকুন।</li>
  <li><b>একটি ফর্ম লাইব্রেরি ব্যবহার করুন:</b> একটি সুপ্রতিষ্ঠিত ফর্ম লাইব্রেরি (যেমন <code>@mantine/form</code> বা <code>react-hook-form</code>) ব্যবহার করার কথা গুরুত্ব সহকারে বিবেচনা করুন, কারণ তারা শক্তিশালী বৈশিষ্ট্য, পারফরম্যান্স অপ্টিমাইজেশন এবং অ্যাক্সেসিবিলিটি উন্নত করার সুবিধা দিয়ে থাকে। চাকা নতুন করে আবিষ্কার করবেন না!</li>
</ul>

<h2>ফর্ম ডিজাইনের জন্য বৈশ্বিক বিবেচনা</h2>

<p>বিশ্বব্যাপী দর্শকদের জন্য ফর্ম ডিজাইন করার সময়, সাংস্কৃতিক পার্থক্য এবং স্থানীয়করণের প্রয়োজনীয়তা বিবেচনা করা অত্যন্ত গুরুত্বপূর্ণ। এখানে কিছু মূল বিবেচ্য বিষয় রয়েছে:</p>

<ul>
  <li><b>ঠিকানার ফরম্যাট:</b> বিভিন্ন দেশে ঠিকানার ফরম্যাট উল্লেখযোগ্যভাবে ভিন্ন হয়। নমনীয় ঠিকানা ক্ষেত্র সরবরাহ করুন যা বিভিন্ন ঠিকানা কাঠামোকে স্থান দিতে পারে। নির্বাচিত দেশের উপর ভিত্তি করে ঠিকানা ক্ষেত্রগুলো স্বয়ংক্রিয়ভাবে সামঞ্জস্য করতে একটি দেশ নির্বাচক ব্যবহার করার কথা বিবেচনা করুন।</li>
  <li><b>ফোন নম্বরের ফরম্যাট:</b> ফোন নম্বরের ফরম্যাটও দেশ ভেদে ভিন্ন হয়। একটি কান্ট্রি কোড নির্বাচক সরবরাহ করুন এবং ব্যবহারকারীদের তাদের স্থানীয় ফরম্যাটে ফোন নম্বর প্রবেশ করার অনুমতি দিন।</li>
  <li><b>তারিখের ফরম্যাট:</b> বিভিন্ন দেশে তারিখের ফরম্যাট ভিন্ন। একটি ডেট পিকার ব্যবহার করুন যা বিভিন্ন তারিখের ফরম্যাট সমর্থন করে অথবা ব্যবহারকারীদের তাদের পছন্দের তারিখের ফরম্যাট নির্বাচন করতে দিন। উদাহরণস্বরূপ, মার্কিন যুক্তরাষ্ট্র সাধারণত MM/DD/YYYY ব্যবহার করে, যখন ইউরোপ প্রায়শই DD/MM/YYYY ব্যবহার করে।</li>
  <li><b>কারেন্সি ফরম্যাট:</b> কারেন্সি ফরম্যাট দেশ ভেদে ভিন্ন হয়। ব্যবহারকারীর লোকেল অনুযায়ী কারেন্সি প্রতীক এবং ফরম্যাট প্রদর্শন করুন।</li>
  <li><b>নামের ক্রম:</b> সংস্কৃতি ভেদে নামের ক্রম ভিন্ন হয়। কিছু সংস্কৃতিতে প্রথমে প্রদত্ত নাম ব্যবহার করা হয়, আবার অন্য সংস্কৃতিতে প্রথমে পারিবারিক নাম ব্যবহার করা হয়। প্রদত্ত নাম এবং পারিবারিক নামের জন্য আলাদা ক্ষেত্র সরবরাহ করুন অথবা ব্যবহারকারীদের তাদের পছন্দের নামের ক্রম নির্দিষ্ট করতে দিন।</li>
  <li><b>ভাষা সমর্থন:</b> নিশ্চিত করুন যে আপনার ফর্মগুলো বিশ্বব্যাপী দর্শকদের জন্য একাধিক ভাষায় উপলব্ধ। ফর্ম লেবেল, ত্রুটির বার্তা এবং অন্যান্য পাঠ্য অনুবাদ করতে একটি স্থানীয়করণ লাইব্রেরি ব্যবহার করুন।</li>
  <li><b>সাংস্কৃতিক সংবেদনশীলতা:</b> আপনার ফর্ম ডিজাইন করার সময় সাংস্কৃতিক সংবেদনশীলতার প্রতি মনোযোগী হন। এমন ছবি বা ভাষা ব্যবহার করা থেকে বিরত থাকুন যা নির্দিষ্ট সংস্কৃতির জন্য আপত্তিকর হতে পারে।</li>
</ul>

<h2>উপসংহার</h2>

<p>রিঅ্যাক্টের <code>useFormState</code> হুক, বা ফর্ম লাইব্রেরি দ্বারা প্রদত্ত এর অনুরূপ বৈশিষ্ট্যগুলো, ফর্ম স্টেট ম্যানেজমেন্ট এবং ভ্যালিডেশনকে সহজ করার জন্য একটি শক্তিশালী টুল। ফর্ম স্টেটকে কেন্দ্রীভূত করে, ডিক্লারেটিভ ভ্যালিডেশন নিয়ম সংজ্ঞায়িত করে এবং ব্যবহারকারীদের রিয়েল-টাইম ফিডব্যাক প্রদান করে, <code>useFormState</code> আপনাকে শক্তিশালী, অ্যাক্সেসিবল এবং ব্যবহারকারী-বান্ধব ফর্ম তৈরি করতে সক্ষম করে যা ব্যবহারকারীর অভিজ্ঞতা এবং ডেটার অখণ্ডতা বৃদ্ধি করে। মনে রাখবেন, আপনার জন্য কঠিন কাজগুলো করার জন্য একটি সুপ্রতিষ্ঠিত লাইব্রেরি ব্যবহার করার কথা গুরুত্ব সহকারে বিবেচনা করুন।</p>

<p>এই বিস্তারিত নির্দেশিকায় বর্ণিত নির্দেশিকা এবং সেরা অনুশীলনগুলো অনুসরণ করে, আপনি রিঅ্যাক্টে ফর্ম ডেভেলপমেন্টে দক্ষতা অর্জন করতে পারেন এবং আপনার ব্যবহারকারী এবং অ্যাপ্লিকেশনের চাহিদা পূরণ করে এমন ব্যতিক্রমী ফর্ম তৈরি করতে পারেন।</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">রিঅ্যাক্ট</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormState</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ফর্ম ভ্যালিডেশন</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">স্টেট ম্যানেজমেন্ট</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">রিঅ্যাক্ট হুকস</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ফর্ম অ্যাক্সেসিবিলিটি</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ব্যবহারকারীর অভিজ্ঞতা</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ওয়েব ডেভেলপমেন্ট</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ফ্রন্ট-এন্ড ডেভেলপমেন্ট</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RC("B:1","S:1")</script></body></html>